<template>
  <div class="header">
    <Menu class="header-nav" mode="horizontal" theme="dark">
      <MenuItem name="/system" to="/system">
        <Icon type="ios-paper"/>
        系统管理
      </MenuItem>
      <MenuItem name="/redis" to="/redis">
        <Icon type="ios-paper"/>
        Redis
      </MenuItem>
      <div class="header-user">
        <Avatar icon="ios-person"/>
        <ButtonGroup>
          <Button ghost>
            <Dropdown
              @on-click="handleClickUser"
              trigger="click"
              placement="bottom">
              <a href="javascript:void(0)" style="color: #ffffff">
                User
                <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                <DropdownItem>个人信息</DropdownItem>
                <DropdownItem divided>在线</DropdownItem>
                <DropdownItem>忙碌</DropdownItem>
                <DropdownItem>隐身</DropdownItem>
                <DropdownItem name="set" divided>设置</DropdownItem>
                <DropdownItem divided>退出</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </Button>
          <Button ghost>
            <Badge :count="3" type="info">
              <Icon type="ios-notifications-outline" size="22"/>
            </Badge>
          </Button>
          <Button ghost>
            <Badge :count="30" type="info">
              <Icon type="ios-people-outline" size="22"/>
            </Badge>
          </Button>
        </ButtonGroup>
      </div>
    </Menu>
    <Modal
      :mask-closable="false"
      scrollable
      :width="700"
      title="设置"
      v-model="userSettingShow">
      <div id="UserSetting" style="width: 680px; height: 400px; overflow-x: hidden; overflow-y: auto">
        <Row :gutter="10">
          <Col span="18">
            <Divider id="userInfo" orientation="left">User Info</Divider>
            <Form :model="userSettingForm" :label-width="80">
              <FormItem label="Input">
                <Input v-model="userSettingForm.input" placeholder="Enter something..."></Input>
              </FormItem>
              <FormItem label="Select">
                <Select v-model="userSettingForm.select">
                  <Option value="beijing">New York</Option>
                  <Option value="shanghai">London</Option>
                  <Option value="shenzhen">Sydney</Option>
                </Select>
              </FormItem>
            </Form>
            <Divider id="userInfo2" orientation="left">Setting</Divider>
            <Form :model="userSettingForm" :label-width="80">
              <FormItem label="Input">
                <Input v-model="userSettingForm.input" placeholder="Enter something..."></Input>
              </FormItem>
              <FormItem label="Select">
                <Select v-model="userSettingForm.select">
                  <Option value="beijing">New York</Option>
                  <Option value="shanghai">London</Option>
                  <Option value="shenzhen">Sydney</Option>
                </Select>
              </FormItem>
            </Form>
            <Divider id="userInfo3" orientation="left">Setting</Divider>
            <Form :model="userSettingForm" :label-width="80">
              <FormItem label="Input">
                <Input v-model="userSettingForm.input" placeholder="Enter something..."></Input>
              </FormItem>
              <FormItem label="Select">
                <Select v-model="userSettingForm.select">
                  <Option value="beijing">New York</Option>
                  <Option value="shanghai">London</Option>
                  <Option value="shenzhen">Sydney</Option>
                </Select>
              </FormItem>
            </Form>
            <Divider orientation="left">Setting</Divider>
            <Form :model="userSettingForm" :label-width="80">
              <FormItem label="Input">
                <Input v-model="userSettingForm.input" placeholder="Enter something..."></Input>
              </FormItem>
              <FormItem label="Select">
                <Select v-model="userSettingForm.select">
                  <Option value="beijing">New York</Option>
                  <Option value="shanghai">London</Option>
                  <Option value="shenzhen">Sydney</Option>
                </Select>
              </FormItem>
            </Form>
            <Divider orientation="left">Setting</Divider>
            <Form :model="userSettingForm" :label-width="80">
              <FormItem label="Input">
                <Input v-model="userSettingForm.input" placeholder="Enter something..."></Input>
              </FormItem>
              <FormItem label="Select">
                <Select v-model="userSettingForm.select">
                  <Option value="beijing">New York</Option>
                  <Option value="shanghai">London</Option>
                  <Option value="shenzhen">Sydney</Option>
                </Select>
              </FormItem>
            </Form>
            <Divider orientation="left">Setting</Divider>
            <Form :model="userSettingForm" :label-width="80">
              <FormItem label="Input">
                <Input v-model="userSettingForm.input" placeholder="Enter something..."></Input>
              </FormItem>
              <FormItem label="Select">
                <Select v-model="userSettingForm.select">
                  <Option value="beijing">New York</Option>
                  <Option value="shanghai">London</Option>
                  <Option value="shenzhen">Sydney</Option>
                </Select>
              </FormItem>
            </Form>
            <Divider orientation="left">Setting</Divider>
            <Form :model="userSettingForm" :label-width="80">
              <FormItem label="Input">
                <Input v-model="userSettingForm.input" placeholder="Enter something..."></Input>
              </FormItem>
              <FormItem label="Select">
                <Select v-model="userSettingForm.select">
                  <Option value="beijing">New York</Option>
                  <Option value="shanghai">London</Option>
                  <Option value="shenzhen">Sydney</Option>
                </Select>
              </FormItem>
            </Form>
          </Col>
          <Col span="6">
            <Anchor show-ink container="#UserSetting" style="position: fixed" >
              <AnchorLink href="#userInfo" title="用户信息" />
              <AnchorLink href="#userInfo2" title="Static Position" />
              <AnchorLink href="#userInfo3" title="Static Position" />
            </Anchor>
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: 'Header',
    data () {
      return {
        userSettingShow: false,
        userSettingForm: {}
      }
    },
    methods: {
      handleClickUser (name) {
        if (name === 'set') {
          this.userSettingShow = true
        }
      }
    }
  }
</script>

<style scoped>
  .header {
    width: 100%;
    height: 50px;
  }

  .header-nav {
    padding-left: 200px;
    width: 100%;
    border-bottom: #cccccc 1px solid;
  }

  .header-user {
    margin-right: 10px;
    float: right;
  }

  /* iview样式重写 */
  .ivu-menu-horizontal {
    height: 50px;
    line-height: 46px;
  }

  .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-item:hover,
  .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-submenu:hover {
    color: #ffffff;
    border-bottom: #5cadff 3px inset;
  }
</style>